


Ruby Text

by Elsepth



Category: No Fandom
Genre: CSS, Furigana, HTML, Other, Ruby Text, Work Skin, tutorial
Language: English
Status: Completed
Published: 2020-01-13
Updated: 2020-01-12
Packaged: 2021-02-27 08:00:03
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 2
Words: 366
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22233682
Author URL: https://archiveofourown.org/users/Elsepth/pseuds/Elsepth
Summary: A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
Comments: 3
Kudos: 4





	1. Chapter 1

## Ruby Text in AO3 Workskins

This workskin ruby! CSS allows one to have (right aligned) ruby text furigana in one's work. The ruby text is right-aligned to the parent element, and I have included a right:0px css tag if one wants to add a universal horizontal offset. For ease of use, one can put square brackets and braces around the ruby text and mass-replace them with the following rules.
    
    
      
    [ :: <span class="ruby">
    { :: <span class="rt">
    ]} :: </span></span>
    
    

The introductory paragraph looks like this before replacement:  
`  
This [workskin{ ruby!}] CSS allows you to have (right aligned) [ruby text{ furigana}] in your work. For ease of use, you can put square brackets and braces around the ruby text and mass-replace them with the following rules.  
`

### CSS

`#workskin .ruby {  
position: relative;  
}`

`#workskin .rt {  
position: absolute;  
font-size: 60%;  
top: -0.5em;  
right: 0px;  
}`


	2. Co-opting the SUP tag for CSS-stripped readability

**Summary for the Chapter:**

> But what if the CSS is gone?

## Dealing with CSS stripping

There are times when one cannot rely on CSS to remain present, for example when a work is saved as a pdf. What's an author to do? Luckily, if one is willing to sacrifice the normal use of the superscript HTML tag - to a limited extent this lost functionality can be restored by use of unicode superscript characters - this present no trouble at all! Below is the sample paragraph from the first chapter, modified to use the SUP tag:

This workskin ruby! CSS allows one to have (right aligned) ruby text furigana in one's work. The ruby text is right-aligned to the parent element, and I have included a right:0px css tag if one wants to add a universal horizontal offset.For ease of use, one can put square brackets and braces around the ruby text and mass-replace them with the following rules.
    
    
      
    [ :: <span class="ruby">
    { :: <sup>
    }] :: </sup></span>
    
    

The introductory paragraph looks like this before replacement:  
``  
This [workskin{ ruby!}] CSS allows you to have (right aligned) [ruby text{ furigana}] in your work. For ease of use, you can put square brackets and braces around the ruby text and mass-replace them with the following rules.  


### CSS
    
    
    #workskin .ruby {
      position: relative;
    }
    
    #workskin .rt {
      position: absolute;
      font-size: 60%;
      top: -0.5em;
      right: 0px;
    }
    
    #workskin sup {
      position: absolute;
      font-size: 60%;
      top: -0em;
      right: 0px;
    }
    


End file.
